<template>
  <div>
    <el-form ref="form" :model="formData" :rules="rules" label-width="120px">
      <template v-for="(item, index) in formList">
        <el-form-item
          :key="`${item.prop}${index}`"
          :style="item.itemStyle || {}"
          :label="item.name"
          :prop="item.prop"
          :class="item.itemClass"
        >
          <component
            :is="item.componentType || 'el-input'"
            :style="item.style || {}"
            :value-format="item.valueFormat || {}"
            v-if="item.prop"
            v-model="formData[item.prop]"
            :clearable="true"
            :class="item.class"
            v-bind="item.attrConfig || {}"
            @change="handlerSelectData(item)"
          >
            <template v-for="option in item.optionList">
              <el-option
                :key="option.code"
                :label="option.name"
                :value="option.code"
              />
            </template>
          </component>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script>
import { dictMixin } from '@/mixin/dict'

export default {
  name: 'AddEmissionRange',
  mixins: [dictMixin],
  props: {
    // 请求参数
    requestParams: {
      type: Object,
      default: () => ({})
    },
    // 弹窗数据
    popData: {
      type: Object,
      default: () => ({})
    },
    // 弹窗配置
    popConfig: {
      type: Object,
      default: () => ({})
    },
    // 弹窗取消
    close: {
      type: Boolean,
      default: false
    },
    // 弹窗确认
    confirm: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      fileList: [],
      isAdd: true,
      formData: {},
      maxRemarkLength: 200,
      formList: [
        {
          name: '范围名称',
          prop: 'rangeName',
          attrConfig: { placeholder: '请输入范围名称' }
        },
        {
          name: '说明',
          prop: 'rangeRemark',
          componentType: 'el-input',
          attrConfig: {
            type: 'textarea',
            placeholder: '请输入说明',
            autosize: {
              minRows: 3,
              maxRows: 6
            }
          },
          style: { width: '100%' }
        }
      ]
    }
  },
  computed: {
    rules() {
      return {
        rangeName: [
          { required: true, message: '请输入范围名称', trigger: 'blur' },
          { max: 50, message: '范围名称最长50字符', trigger: 'blur' },
        ],
        rangeRemark: [
          { required: false, max: 200, message: '说明不超过200字', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    popData: {
      handler(data) {
        this.isAdd = !data.id
        this.formList.forEach((e) => {
          this.$set(this.formData, e.prop, data[e.prop])
        })
        this.$set(this.formData, 'id', data.id)
      },
      deep: true,
      immediate: true
    },
    confirm() {
      const params = {
        ...(this.formData || {})
      }
      this.submit(params)
    }
  },
  methods: {
    /**
     * change事件
     */
    handlerSelectData(config) {
      const Ref = this.$refs[config.prop]
      if (Ref && config.isClosePop) {
        Ref.dropDownVisible = false
      }
    },
    /**
     * 提交
     */
    submit(params) {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          const res = await this.$api.carbonEmissionRange[ this.isAdd ? 'add' : 'update' ](params)
          if (Number(res.code) === 1000) {
            this.$message.success(`${ this.isAdd ? '新增' : '编辑' }成功！`)
            this.$emit('onFinish', 'carbonEmissionRange-add')
          }
        }
      })
    }
  }
}
</script>
